// 添加类型 - 点击事件
// 弹出层(模态框)的输入框表单页面
var add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`;


$('.add').on('click', function () {
    var index = layer.open({
        type: 1,
        title: '新建类别',
        content: add_str,
        area: ['500px', '250px'],
        success: function () {
            $('.add-form').on('submit', function (ev) {
                ev.preventDefault();
                addCateApi($('.add-form').serialize(), function (res) {
                    console.log(res);
                    load()
                    layer.close(index)
                })

            })
        }
    })
})

// 打开分类管理页 - 铺设分类数据
function load() {
    $(".layui-table tbody").empty()
    cateListApi({}, function (res) {
        res.data.data.forEach(function (obj) {
            var { name, alias, Id } = obj; // 解构赋值
            // 铺设页面
            var theTr = `<tr>  
            <td>${name}</td>
            <td>${alias}</td>
            <td>
              <button myid="${Id}" data-name="${name}" data-alias="${alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
    
              <button myid="${Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
            </td>
          </tr>`;
            $(".layui-table tbody").append(theTr);
        })
    })
}
load();

// 事件委托 删除 - 点击事件
$('.layui-table tbody').on('click', '.delete', function (ev) {
    delAPi({ id: $(this).attr('myid') }, function (res) {
        $(ev.target).parents('tr').remove();

    })

})

// 事件委托 编辑类别
var edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`;

$('.layui-table tbody').on('click', '.edit', function (ev) {
    var index = layer.open({
        type: 1,
        title: '编辑类别',
        content: edit_str,
        area: ['500px', '250px'],
        success: function () {
            var myid = $(ev.target).attr('myid')
            var name = $(ev.target).attr('data-name')
            var alias = $(ev.target).attr('data-alias')

            // 要给弹出的编辑弹窗 输入框赋值
            $('.add-form input[name=name]').val(name);
            $('.add-form input[name=alias]').val(alias);
            $('.add-form input[name=Id]').val(myid);
            $('.add-form').on('submit', function (ev) {
                ev.preventDefault();
                upCateApi($('.add-form').serialize(), function (res) {
                    load();
                    layer.close(index);
                })
            })


        }
    })
})